<template>
  <!-- 新闻详情 -->
  <popup
    :show="newsDetailShow"
    :title="newsDetails.title"
    @onClone="newsDetailFun"
  >
    <div class="newsDetailDialog">
      <!--  style="width: 1200px; height: 500px;" -->
      <happy-scroll color="#476396" size="9" resize hide-horizontal>
        <section v-html="newsDetails.content" class="sectionBox"></section>
      </happy-scroll>
      <!-- <img :src="newsDetails.img" alt=""> -->
    </div>
  </popup>
</template>

<script>
import popup from "../../popup.vue";

export default {
  components: {
    popup,
  },
  name: "newsDetailDialog",
  data() {
    return {
      newsDetailDialog: `<div>1111111111</div>`,
    };
  },
  computed: {
    newsDetailShow: function () {
      return this.$store.state.newsDetailShow;
    },
    newsDetails: function () {
      return this.$store.state.newsDetails;
    },
  },
  mounted() {
    console.log(this.newsDetails);
  },
  methods: {
    newsDetailFun(data) {
      let that = this;
      that.$store.dispatch("changeFun", {
        str: "newsDetailShow",
        cont: data,
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.newsDetailDialog {
  width: 1200px;
  height: 580px;
  // overflow: auto;
  .sectionBox{
    width: 97%;
    padding-bottom: 20px;
  }
  p {
    color: #fff !important;
  }
  .happy-scroll-container{
    width: 98%;
  }
  .happy-scroll-strip--vertical{
    right: -30px;
  }
}
</style>

